<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" @close="onCancel">
    <a-typography>
      <div v-if="EmptyUtil.isNotEmptyObject(props.record.substanceList)" style="width: 100%">
        <a-space direction="vertical" fill>
        <a-list v-for="(item, index) in props.record.substanceList" style="margin-bottom: 10px">
          <template #header>
            {{ index + 1 }}, {{ item.text }}
          </template>
          <a-list-item>
            <a-radio-group v-if="item.type ==='single'" v-model="item.cont[0]" direction="vertical">
              <a-radio disabled v-for="(items,index) in item.options" :key="index" :value="items.value">{{items.title}}
              </a-radio>
            </a-radio-group>

            <a-checkbox-group disabled v-if="item.type ==='multiple'" v-model="item.cont" direction="vertical">
              <a-checkbox  v-for="(items,index) in item.options" :key="index" :value="items.value">{{items.title}}
              </a-checkbox>
            </a-checkbox-group>
          </a-list-item>
        </a-list>
        </a-space>
      </div>
      <div v-else>
        <br>
        <br>
        <br>
        <br>
        <a-empty description="当前用户未提交" />
      </div>
    </a-typography>

  </a-drawer>
</template>
<script setup lang="ts">

import {LocalDrawer} from "@/libs/core";
import {EmptyUtil, ObjUtil} from "@/utils";

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const service = new LocalDrawer(emit)
const {LAYER, onCancel} = service
LAYER.title = '问答详情'
LAYER.width = 650
</script>
